<template>
  <div id="my-body"> 
    <div class="header">
      <!-- 头部组件 -->
      <no-data></no-data>
      <!-- 填写信息表单 -->
      <div class="my-table">
        <img src="../assets/imgs/dw.png" alt="" />
        <!-- 省份 地址 城市 宠物选择-->
        <div id="example">
          <select class="select" v-model="selectProvince">
            <option
              v-for="(item, index) in provinces"
              :key="index"
              :value="index"
            >
              {{ item }}
            </option></select
          >|
          <select class="select" v-model="selectCity">
            <option
              v-for="(i, index) in citys[selectProvince]"
              :key="index"
              :value="index"
            >
              {{ i }}
            </option></select
          >|
          <select class="select">
            <option>请选择宠物类型</option>
            <option>小型犬</option>
            <option>大型犬</option>
            <option>中型犬</option>
            <option>小型宠物</option>
            <option>猫咪</option>
          </select>
        </div>
        <img src="../assets/imgs/mp.png" alt="" />
        <Input
          v-model="value"
          placeholder="请输入宠物名称"
          style="width: 200px"
        />
      </div>
      <!-- 日期选择 -->
      <div class="my-table1">
        <div class="my-time">
          <span>寄养时间：</span>
          <DatePicker
            type="date"
            placeholder="开始寄养时间"
            style="width: 250px"
          ></DatePicker
          >|
          <DatePicker
            type="date"
            placeholder="结束寄养时间"
            style="width: 250px"
          ></DatePicker>
          <div class="input1">
            联系方式 :
            <Input
              v-model="value"
              placeholder="请输入手机号"
              style="width: 250px"
            />
          </div>
        </div>
        <div class="yuyue"><h1>预约寄养</h1></div>
      </div>
    </div>

    <!-- 特长插图 -->
    <div class="ct">
      <img src="../assets/imgs/ct.png" alt="" />
    </div>

    <!-- 轮播图卡片 -->
    <div class="Rotation">
      <h1>别去笼子，让毛孩子住我家</h1>
      <br />
      <span
        >温馨舒适的环境，开放宽敞的活动空间，温暖充足的阳光；清新流动的空气，干净清洁的饮用水，新鲜可口的食物;<br
      /></span>
      <span>有爱抚，有固定的散步时间，还有一起玩耍的小伙伴。</span
      ><br /><br /><br />
      <div>
        <Carousel
          loop
          arrow="always"
          dots="none"
          autoplay="true"
          autoplay-speed="4000"
        >
          <CarouselItem v-for="(user, index) in Shopkeeper" :key="index">
            <div class="qwe">
              <div class="lb" v-for="(item, i) in user.q" :key="i">
                <img class="img1" :src="item.url1" alt="" /><br />
                <!-- 文字 -->
                <div class="fmilyright">
                  <img class="img2" :src="item.url2" alt="" />
                  <div class="my-name">
                    <div
                      class="fname1"
                      style="text-align: left; margin-top: 13px"
                    >
                      <img
                        src="../assets/imgs/home_icon_family.png"
                        class="family-icon"
                      />
                      <span class="fname">{{ item.text }}</span>
                    </div>
                    <div class="cityname1" style="text-align: left">
                      <img
                        src="../assets/imgs/home_icon_dingwei.png"
                        class="location-icon"
                      />
                      <span class="cityname">{{ item.city }}</span>
                    </div>
                    <strong
                      ><span style="font-size: 18px">¥</span
                      ><span>{{ user.price }}</span> 起/晚</strong
                    >
                  </div>
                </div>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
    </div>

    <!-- 中部带背景卡片 -->
    <h2 class="bzjj-h1">用心确保每一次寄养的安全</h2>
    <br />
    <div class="duanbg">
      <div class="bzjj" v-for="(item, i) in zjbg" :key="i">
        <img :src="item.url" alt="" /><br />
        <span class="span1">{{ item.text1 }}</span
        ><br />
        <span class="span2">{{ item.text2 }}<br />{{ item.text3 }}</span>
      </div>
    </div>

    <!-- 寄养日记卡片 -->
    <div class="diary">
      <h1>爱，始于家的感觉<br />让每一次寄养变成它们温馨的旅程</h1>
      <div>
        <Carousel loop arrow="always" dots="outside">
          <CarouselItem v-for="(item, i) in Diary" :key="i">
            <div class="diary1">
              <div class="diary3">
                <span
                  style="
                    position: absolute;
                    left: 457;
                    width: 130px;
                    height: 40px;
                    display: inline-block;
                    background: #fbc02d;
                    font-size: 20px;
                    text-align: center;
                    line-height: 2;
                    top: 40px;
                  "
                  >寄养日记</span
                >
                <img
                  style="width: 670px; height: 470px"
                  :src="item.url1"
                  alt=""
                />
              </div>
              <div class="diary2">
                <a
                  href="http://www.viptail.epet.com/share/long_article.html?id=250963"
                >
                  <h1>{{ item.text1 }}</h1>
                  <br /><br />
                  <img :src="item.url2" alt="" />
                  <strong class="daily-family-name">{{ item.text2 }}</strong>
                  <h2>{{ item.text3 }}</h2>
                  <div class="daily-family-content">{{ item.text4 }}</div>
                </a>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
    </div>

    <!-- 跳转连接黄色背景图 -->
    <div class="comefamily">
      <a target="_blank" href="http://petilives.com/download/pc.html">
        <img
          src="http://viptail.image.alimmdn.com/files/official_web/img/pic_chengweijiating.png"
        />
      </a>
    </div>

    <!-- 发现社区 -->
    <div class="community">
      <h1>发现社区</h1>
      <div class="community-all">
        <div class="community-top">
          <a target="_blank" href="http://petilives.com/download/pc.html">
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/home_pic_faxian.png"
              class="community-left"
            />
            <span
              ><h2>宠圈</h2>
              寄养时，随时查看寄养家庭发布的寄养动态。消息、视频、语音在线与家庭沟通宠物寄养情况（保证双方安全）同时，还可以了解宠物知识和世界宠物新闻。看遍天下萌宠，看不完的宠物资讯。欢迎加入小狗在家，养宠人必备的宠物APP。</span
            >
          </a>
        </div>
        <div>
          <Carousel loop arrow="always" dots="outside">
            <CarouselItem v-for="(item, index) in swiper" :key="index">
              <div class="swiper-container-community">
                <img
                  v-for="(childrenItem, childrenIndex) in item.url"
                  :key="childrenIndex"
                  :src="childrenItem"
                  style="width: 240.5px; margin-right: 20px"
                />
              </div>
            </CarouselItem>
          </Carousel>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyFooter from '../components/MyFooter.vue';
import NoData from '../components/NoData.vue';
export default {
  components: { NoData, MyFooter },
  data() {
    return {
      // 选择省份
      selectProvince: 0,
      // 选择市
      selectCity: 0,
      //发现社区轮播
      swiper: [
        {
          url: [
            require("../assets/imgs/1-1.png"),
            require("../assets/imgs/1-2.png"),
            require("../assets/imgs/1-3.png"),
            require("../assets/imgs/1-4.png"),
          ],
        },
        {
          url: [
            require("../assets/imgs/2-1.png"),
            require("../assets/imgs/2-2.png"),
            require("../assets/imgs/2-3.png"),
            require("../assets/imgs/2-4.png"),
          ],
        },
        {
          url: [
            require("../assets/imgs/3-1.png"),
            require("../assets/imgs/3-2.png"),
            require("../assets/imgs/3-3.png"),
            require("../assets/imgs/3-4.png"),
          ],
        },
      ],
      //寄养日记
      Diary: [
        {
          url1: require("../assets/imgs/201705270852475990F03B4.jpg"),
          url2: require("../assets/imgs/201704240139161880F682A.jpg"),
          text1: "教你给狗宝手制狗粮！",
          text2: "胖丁爱豆豆",
          text3: "@十二的寄养日记",
          text4:
            "市面上虽然有很多号称零添加“天然粮”的狗粮，但是保质期那么久，真的可能“零”添加吗？反正我是不相信的，哈哈。现在我都是自己动手做狗粮给豆子吃,所以今天要来分享一下自制狗粮的心得。",
        },
        {
          url1: require("../assets/imgs/201707092111190140CEA7E.jpg"),
          url2: require("../assets/imgs/201707092142027680EA5FC.jpg"),
          text1: "loft里汤圆的小时光",
          text2: "FENGq",
          text3: "@汤圆的寄养日记",
          text4:
            "汤圆是来我们家寄养的第一只狗狗，第一次见面汤圆还略显羞涩，到了家里东嗅嗅西嗅嗅，和泰迪lolo不一会儿就玩了起来。",
        },
        {
          url1: require("../assets/imgs/201710091652474160481E8.jpg"),
          url2: require("../assets/imgs/201709261607459450F91F5.jpg"),
          text1: "感谢能够遇见你们",
          text2: "张矜持",
          text3: "@这是猿粪！",
          text4:
            "我人生第一次做寄养家庭，或许做的不够好，但是我已经是把这些毛孩子当成自己的孩子，我希望他们在我这里，能够感受到安心，舒适，惬意~这只黑头柯基叫珍珠，是个小公举，她很亲人，第一次见面她就一点都不认生，跟着我就走了，在车上她很乖，一点也不闹，招人喜爱，我也是控制不住自己的情绪，抱着她的狗头一个劲儿的亲……?到家后，她可能反应过来了什么，有些敏感，门外有点声音她就会叫，我不停的摸她，想给她一点安全感……两天后，珍珠完全适应了在我家的生活，每天跟我家的狗子疯闹，旋转跳跃不停歇……珍珠有点挑食，不吃自己的狗粮和零食，但是Sunday的狗粮他倒是爱吃，每次都能把一碗狗粮吃的干干净净~我烤的鸡胸肉她也超级爱吃，嘎嘣脆，嗯~她还特别爱喝酸奶，我生怕珍珠在我家饿瘦了，没想到珍珠麻麻来接她回家的时候，还胖了两斤…珍珠超级可爱的小婊贝，明明是小公举，还偏要抬腿尿尿，是不是卖萌！！",
        },
      ],
      //中间背景卡片
      zjbg: [
        {
          url: "http://viptail.image.alimmdn.com/files/official_web/img/home_icon_baozhang.png",
          text1: "10万保障基金",
          text2: "解决寄养时宠物的安全、健康等问题",
          text3: "线上订单，全程享受保障服务",
        },
        {
          url: "http://viptail.image.alimmdn.com/files/official_web/img/home_icon_longyang.png",
          text1: "拒绝笼养",
          text2: "拥有在家一样自由的空间、干净的水、",
          text3: "食物和无限的陪伴",
        },
        {
          url: "http://viptail.image.alimmdn.com/files/official_web/img/home_icon_zijin.png",
          text1: "担保资金安全",
          text2: "在线支付寄养费",
          text3: "主人寄养满意后,寄养家庭才会收到付款",
        },
        {
          url: "http://viptail.image.alimmdn.com/files/official_web/img/home_icon_renzheng.png",
          text1: "实名视频认证",
          text2: "对家庭身份和环境严格认证",
          text3: "平台监管、追踪每一笔线上订单",
        },
      ],
      //轮播卡片
      Shopkeeper: [
        {
          q: [
            {
              url1: require("../assets/imgs/cq001-f.jpg"),
              url2: require("../assets/imgs/cq001-u.jpg"),
              text: "鸡血小皇后的家",
              city: "重庆",
              price: "40",
            },
            {
              url1: require("../assets/imgs/bj002-f.jpg"),
              url2: require("../assets/imgs/bj002-u.jpg"),
              text: "毛孩子家庭寄养",
              city: "北京",
              price: "50",
            },
            {
              url1: require("../assets/imgs/xm002-f.jpg"),
              url2: require("../assets/imgs/xm002-u.jpg"),
              text: "家有芒果",
              city: "厦门",
              price: "55",
            },
          ],
        },
        {
          q: [
            {
              url1: require("../assets/imgs/bj003-f.jpg"),
              url2: require("../assets/imgs/bj003-u.jpg"),
              text: "猫娃狗娃托儿所",
              city: "北京",
              price: "35",
            },
            {
              url1: require("../assets/imgs/km001-f.jpg"),
              url2: require("../assets/imgs/km001-u.jpg"),
              text: "比熊元宝的家",
              city: "昆明",
              price: "38",
            },
            {
              url1: require("../assets/imgs/wh002-f.jpg"),
              url2: require("../assets/imgs/wh002-u.jpg"),
              text: "好多只小家庭",
              city: "武汉",
              price: "45",
            },
          ],
        },
        {
          q: [
            {
              url1: require("../assets/imgs/sh002-f.jpg"),
              url2: require("../assets/imgs/sh002-u.jpg"),
              text: "布布与小玉",
              city: "上海",
              price: "88",
            },
            {
              url1: require("../assets/imgs/gz002-f.jpg"),
              url2: require("../assets/imgs/gz002-u.jpg"),
              text: "丢丢家",
              city: "广州",
              price: "55",
            },
            {
              url1: require("../assets/imgs/sz001-f.jpg"),
              url2: require("../assets/imgs/sz001-u.jpg"),
              text: "猫咪球球的家",
              city: "深圳",
              price: "60",
            },
          ],
        },
      ],
      provinces: [
        "北京市",
        "上海市",
        "天津市",
        "重庆市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西壮族自治区",
        "海南省",
        "四川省",
        "贵省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "宁夏回族自治区",
        "青海省",
        "新疆维吾尔族自治区",
        "香港特别行政区",
        "澳门特别行政区",
        "台湾省",
        "其它",
      ],
      citys: [
        [
          "东城",
          "西城",
          "崇文",
          "宣武",
          "朝阳",
          "丰台",
          "石景山",
          "海淀",
          "门头沟",
          "房山",
          "通州",
          "顺义",
          "昌平",
          "大兴",
          "平谷",
          "怀柔",
          "密云",
          "延庆",
        ],
        [
          "黄浦",
          "卢湾",
          "徐汇",
          "长宁",
          "静安",
          "普",
          "闸北",
          "虹口",
          "杨浦",
          "闵行",
          "宝山",
          "嘉定",
          "浦东",
          "金山",
          "松江",
          "青浦",
          "南汇",
          "奉贤",
          "崇明",
        ],
        [
          "和平",
          "东丽",
          "河东",
          "西青",
          "河西",
          "南",
          "南开",
          "北辰",
          "河北",
          "武清",
          "红挢",
          "塘沽",
          "汉沽",
          "大港",
          "宁河",
          "静海",
          "宝坻",
          "蓟县",
        ],
        [
          "万州",
          "涪陵",
          "渝中",
          "大渡口",
          "江北",
          "沙坪",
          "九龙坡",
          "南岸",
          "北碚",
          "万盛",
          "双挢",
          "渝北",
          "巴南",
          "黔江",
          "长寿",
          "綦江",
          "潼南",
          "铜梁 ",
          "大足",
          "荣昌",
          "壁山",
          "梁平",
          "城口",
          "丰都",
          "垫江",
          "武隆",
          "忠县",
          "开县",
          "云",
          "奉节",
          "巫山",
          "巫溪",
          "石柱",
          "秀山",
          "酉阳",
          "彭水",
          "江津",
          "合川",
          "永川",
          "南川",
        ],
        [
          "石家庄",
          "邯郸",
          "邢台",
          "保定",
          "张家口",
          "承德",
          "廊坊",
          "唐山",
          "秦皇岛",
          "沧州",
          "衡水",
        ],
        [
          "太原",
          "大同",
          "阳泉",
          "长治",
          "晋城",
          "朔州",
          "吕梁",
          "忻州",
          "晋中",
          "临汾",
          "运城",
        ],
        [
          "呼和浩特",
          "包头",
          "乌海",
          "赤峰",
          "呼伦贝尔盟",
          "阿拉善盟",
          "哲里木盟",
          "兴安盟",
          "乌兰布盟",
          "锡林郭勒盟",
          "巴彦淖尔盟",
          "伊克昭盟",
        ],
        [
          "沈阳",
          "大连",
          "鞍山",
          "抚顺",
          "本溪",
          "东",
          "锦州",
          "营口",
          "阜新",
          "辽阳",
          "盘锦",
          "铁岭",
          "朝阳",
          "葫芦岛",
        ],
        [
          "长春",
          "吉林",
          "四平",
          "辽源",
          "通化",
          "白山",
          "松原",
          "白城",
          "延边",
        ],
        [
          "哈尔滨",
          "齐齐哈尔",
          "牡丹江",
          "佳木斯",
          "大庆",
          "绥化",
          "鹤岗",
          "鸡西",
          "黑河",
          "双鸭山",
          "伊春",
          "七台河",
          "大安岭",
        ],
        [
          "南京",
          "镇江",
          "苏州",
          "南通",
          "扬州",
          "盐城",
          "徐州",
          "连云",
          "常州",
          "无锡",
          "宿迁",
          "泰州",
          "淮安",
        ],
        [
          "杭州",
          "宁波",
          "温州",
          "嘉兴",
          "湖州",
          "绍兴",
          "金华",
          "衢州",
          "舟山",
          "台州",
          "丽",
        ],
        [
          "合肥",
          "芜湖",
          "蚌埠",
          "马鞍山",
          "淮北",
          "铜陵",
          "安庆",
          "黄山",
          "滁州",
          "宿州",
          "池州",
          "淮南",
          "巢",
          "阜阳",
          "六安",
          "宣城",
          "亳州",
        ],
        ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南", "龙岩", "宁德"],
        [
          "南昌市",
          "景德镇",
          "九江",
          "鹰潭",
          "萍乡",
          "新馀",
          "赣州",
          "吉安",
          "宜春",
          "抚州",
          "上饶",
        ],
        [
          "济南",
          "青岛",
          "淄博",
          "枣庄",
          "东营",
          "烟台",
          "潍坊",
          "济宁",
          "泰安",
          "威海",
          "日照",
          "莱芜",
          "沂",
          "德州",
          "聊城",
          "滨州",
          "菏泽",
        ],
        [
          "郑州",
          "开封",
          "洛阳",
          "平顶山",
          "安阳",
          "鹤壁",
          "新",
          "焦作",
          "濮阳",
          "许昌",
          "漯河",
          "三门峡",
          "南阳",
          "商丘",
          "信阳",
          "周口",
          "驻马店",
          "济源",
        ],
        [
          "武汉",
          "宜昌",
          "荆州",
          "襄樊",
          "黄石荆门",
          "黄冈",
          "十堰",
          "恩施",
          "潜江",
          "天门",
          "仙桃",
          "随州",
          "咸宁",
          "孝感",
          "鄂州",
        ],
        [
          "长沙",
          "常德",
          "株洲",
          "湘潭",
          "衡阳",
          "岳阳",
          "邵阳",
          "益阳娄底",
          "怀化",
          "郴州",
          "永州",
          "湘西",
          "张家界",
        ],
        [
          "广州",
          "深圳",
          "珠海",
          "汕头",
          "东莞",
          "中山",
          "佛山",
          "韶关",
          "江门",
          "湛",
          "茂名",
          "肇庆",
          "惠州",
          "梅州",
          "汕尾",
          "河源",
          "阳江",
          "清远",
          "潮州",
          "揭阳",
          "云浮",
        ],
        [
          "南宁",
          "柳",
          "桂林",
          "梧州",
          "北海",
          "防城港",
          "钦州",
          "贵港",
          "玉林",
          "南宁地区",
          "柳州地区",
          "贺州",
          "百色",
          "河池",
        ],
        ["海口", "三亚"],
        [
          "都",
          "绵阳",
          "德阳",
          "自贡",
          "攀枝花",
          "广元",
          "内江",
          "乐山",
          "南充",
          "宜宾",
          "广安",
          "达川",
          "雅安",
          "眉山",
          "甘孜",
          "凉山",
          "泸州",
        ],
        [
          "贵阳",
          "六盘水",
          "遵义",
          "安顺",
          "铜仁",
          "黔西南毕节",
          "黔东南",
          "黔南",
        ],
        [
          "昆明",
          "大理",
          "曲靖",
          "玉溪",
          "昭通",
          "楚雄",
          "红河",
          "文山",
          "思茅",
          "西双版纳",
          "保山",
          "德宏",
          "丽江",
          "江",
          "迪庆",
          "临沧",
        ],
        ["拉萨", "日喀则", "山南", "林芝", "昌都", "阿里", "曲"],
        [
          "西安",
          "宝鸡",
          "咸阳",
          "铜川",
          "渭南",
          "延安",
          "榆林",
          "汉中",
          "安康",
          "商洛",
        ],
        [
          "兰",
          "嘉峪关",
          "金昌",
          "白银",
          "天水",
          "酒泉",
          "张掖",
          "武威",
          "定西",
          "陇南",
          "平凉",
          "庆阳",
          "临夏",
          "甘",
        ],
        ["银川", "石嘴山", "吴忠", "固原"],
        ["西宁", "海东", "海南", "海北", "黄南", "玉树", "果洛", "海西"],
        [
          "乌鲁木齐",
          "石河子",
          "克玛依",
          "伊犁",
          "巴音郭勒",
          "昌吉",
          "克孜勒苏柯尔克孜",
          "博尔塔拉",
          "吐鲁",
          "哈密",
          "喀什",
          "和田",
          "阿克苏",
        ],
        ["香港特别行政区"],
        ["澳门特别行政区"],
        [
          "台北",
          "高雄",
          "台中",
          "台南",
          "屏东",
          "南投",
          "云林",
          "新竹",
          "彰化",
          "苗栗",
          "嘉义",
          "莲",
          "桃园",
          "宜兰",
          "基隆",
          "台东",
          "金门",
          "马祖",
          "澎湖",
        ],
        ["北美洲", "南美洲", "亚洲", "非洲", "欧", "大洋洲"],
      ],
    };
  },
  methods: {},
  // watch: {
  //   selectProvince() {
  //     console.log(this.selectProvince);
  //   },
  // },
};
</script>

<style lang="scss">
#my-body {
  width: 100%;
  //尾部
  
  //发现社区
  .community {
    .community-all {
      .swiper-container-community {
        width: 1022px;
        height: 182px;
        margin: 30px auto;
        display: flex;
      }
      .community-top {
        background: #fff;
        img {
          width: 520px;
          height: 380px;
          vertical-align: top;
        }
        span {
          display: inline-block;
          width: 580px;
          height: 380px;
          float: right;
          padding-right: 100px;
          padding-top: 26px;
          font-size: 20px;
          color: #282828;
          line-height: 2;
        }
      }
      width: 1200px;
      margin: 0 auto 100px;
      padding: 20px;
      background: #f1f1f1;
      position: relative;
    }
    h1 {
      text-align: center;
      margin: 100px 0 50px 0;
      font-size: 43px;
      font-weight: 800;
      color: #555;
    }
  }
  // 跳转连接黄色背景图
  .comefamily {
    background: #fbc02d;
    margin: 30px 0;
    text-align: center;
    img {
      vertical-align: middle;
      width: 50%;
      margin: 10px 0;
    }
  }

  //寄养日记卡片
  .diary {
    .diary1 {
      .diary3 {
        position: relative;
        top: 30px;
        left: 50px;
      }
      .diary2 {
        text-align: left;
        border: 0.3px solid #7a797959;
        width: 620px;
        height: 530px;
        padding: 35px 80px 43px 95px;
        .daily-family-content {
          line-height: 2;
          height: 250px;
          width: 365px;
          overflow: hidden;
          font-size: 16px;
          color: #b5b5b5;
        }
        h2 {
          font-size: 18px;
          color: #fbc02d;
          margin: 15px 0 18px 3px;
        }
        .daily-family-name {
          position: relative;
          top: -18px;
          font-size: 20px;
          font-weight: normal;
          margin: 10px 0 0 15px;
          display: inline-block;
        }
        img {
          width: 50px;
          height: 50px;
          padding: 2px;
          border: 0.5px solid #000000;
          border-radius: 50%;
        }
      }
      display: flex;
      justify-content: center;
    }
    > h1 {
      margin-bottom: 50px;
    }
    padding-top: 80px;
    text-align: center;
  }
  .bzjj-h1 {
    width: 100%;
    text-align: center;
    position: relative !important;
    top: 165px;
    font-size: 36px;
    color: #ffffffe1;
  }
  //中间背景卡片
  .duanbg {
    .bzjj {
      .span2 {
        font-size: 16px;
        color: rgba(226, 223, 223, 0.808);
      }
      .span1 {
        font-size: 22px;
        color: #fff;
      }
      margin-top: 170px;
      width: 295px;
      height: 269px;
      text-align: center;
    }
    display: flex;
    justify-content: center;
    background-size: cover; /* 让背景图基于容器大小伸缩 */
    background-color: #cccccc; /* 设置背景颜色，背景图加载过程中会显示背景色 */
    margin-top: 30px;
    width: 100%;
    height: 400px;
    background-image: url("http://viptail.image.alimmdn.com/files/official_web/img/home_central.jpg");
  } 

  //轮播卡片块
  .Rotation {
    .qwe {
      display: flex;
      justify-content: center;
    }

    .fmilyright {
      width: 384px;
      height: 94px;
      border: 0.5px solid #cccccca6;
      margin-top: -6px;
      margin-left: 10px;
      display: flex;
      .my-name {
        float: left;
        padding-top: 10px;
        width: 278px;
        height: 77px;
      }
      .fname1 {
        .fname {
          font-size: 18px;
          position: relative;
          top: -6px;
          margin-top: 10px;
          margin-left: 5px;
          color: #aaa7a4;
        }
        .family-icon {
          width: 18px;
          height: 26px;
        }
      }
      .cityname1 {
        .location-icon {
          width: 18px;
          height: 18px;
        }

        .cityname {
          position: relative;
          top: -3px;
          color: #aaa7a4;
        }
      }

      .img2 {
        border-radius: 50% !important;
        width: 55px;
        height: 55px;
        margin: 20px 15px;
      }
      strong {
        position: relative;
        right: -112px;
        top: -49px;
        span {
          color: #fbc02d;
          font-size: 35px;
        }
      }
    }
    .lb {
      width: 404px;
      height: 326px;
      .img1 {
        width: 384px;
        height: 225px;
      }
    }
    > h1 {
      font-size: 35px;
    }
    > span {
      font-size: 20px;
    }
    text-align: center;
  }
  .ct {
    position: relative;
    top: -120px;
    img {
      border-radius: 15px;
    }

    text-align: center;
  }
  .ivu-input {
    background-color: #ffffff17 !important;
    border: none !important;
  }
  //第一屏
  .header {
 
    .my-table1 {
      display: flex;
      width: 1000px;
      margin: auto;
      // 预约按钮
      .yuyue {
        font-size: 24px;
        width: 280px;
        height: 135px;
        background-color: #fbc02d;
        color: #000000c7;
        margin-top: 15px;
        margin-left: 20px;
        border-radius: 5px;
        text-align: center;
        line-height: 135px;
      }
      // 时间选择器

      .my-time {
        .input1 {
          padding-right: 255px;
          background-color: #ffffffe0;
          width: 700px;
          height: 60px;
          border: none;
          border-radius: 5px;
          margin-top: 15px;
        }
        text-align: center;
        height: 60px;
        line-height: 60px;
        background-color: #ffffffe0;
        border-radius: 5px;
        width: 700px;
        margin-top: 15px;
      }
    }
    // 信息表单
    .my-table {
      Input {
        border: none;
        font-size: 16px;
        color: #0f0202;
      }
      #example {
        line-height: 60px;
        height: 60px;
        align-items: center;
      }
      .select {
        width: 220px;
        height: 40px;
        border: 0px;
      }
      margin: auto;
      font-size: 18px;
      width: 1000px;
      align-items: center;
      justify-content: center;
      display: flex;
      margin-top: -405px;
      background-color: #fff;
      border-radius: 5px;
    }
    background-image: url("../assets/imgs/bg.jpg");
    background-size: cover !important; /* 让背景图基于容器大小伸缩 */
    background-color: #cccccc; /* 设置背景颜色，背景图加载过程中会显示背景色 */
    width: 100%;
    height: 850px;
    el-container {
      width: 100%;
    }
  }
}
</style>
